<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- <a href="#home">home</a>
        <a href="#detail">detail</a>
        <div id="con">

        </div> -->

        <!-- <div class="nav">          
            <ul>
                <li><a href="javascript:void(0)" data-path="index">首页</a></li> 
                <li><a href="javascript:void(0)" data-path="news">新闻</a></li>
                <li><a href="javascript:void(0)" data-path="about">关于</a></li>
            </ul>
        </div> -->
        <div id="con">

        </div>
    </div>
    <script>
        //hash  

        //hash值的改变不会引起页面的跳转，配合hashchange
        let con = document.querySelector('#con');

        // window.onhashchange = function(){
        //     console.log(location.hash);
        //     con.innerHTML = `<p>${location.hash}</p>`
        // }

        //history h5 pushState replaceState 
        
        //popstate：监听状态改变

        window.history.pushState({foo:'home'},null,'home')

        window.history.pushState({foo:'detail'},null,'detail')

        window.addEventListener('popstate',function(e){
            console.log(e.state);
            con.innerHTML = `<p>${e.state.foo}</p>`
        })
        
        //https://blog.csdn.net/weixin_34377919/article/details/88069239
    </script>
</body>
</html>